<template>
  <el-dialog
    title="您的密码不符合密码强度等级，请修改密码"
    :visible.sync="dialogVisible"
    width="40%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :append-to-body="true"
    center
    top="30vh"
  >
    <el-form
      ref="ruleForm2"
      :model="ruleForm2"
      :rules="rules2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="原密码" prop="password">
        <el-input
          v-model="ruleForm2.password"
          type="password"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="密码" prop="newpassword1">
        <el-input
          v-model="ruleForm2.newpassword1"
          type="password"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="newpassword2">
        <el-input
          v-model="ruleForm2.newpassword2"
          type="password"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="校验码" prop="checkCode" v-if="showCheckCode == 1">
        <el-input
          v-model="ruleForm2.checkCode"
          type="input"
          auto-complete="off"
          :placeholder="`${checkCodeTip}`"
        />
      </el-form-item>
      <el-form-item
        style="display: flex; justify-content: center"
        label-width="0"
      >
        <el-button type="primary" @click="submitForm('ruleForm2')"
          >提交
        </el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getPasswordLevel } from "@/util/util";
import { mapState } from "vuex";
import store from "@/store";
import { getStore } from "@/util/store";
import { pwdLevel } from "@/const/setting/index";
import request from "@/router/axios";
export default {
  name: "editPassword",
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.ruleForm2.password !== "") {
        if (value !== this.ruleForm2.newpassword1) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var validateLevel = (rule, value, callback) => {
      const level = this.$store.state.common.passwordLevel;
      if (getPasswordLevel(value) < level) {
        callback(new Error(`请输入${pwdLevel[level]}`));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      headers: {
        Authorization: "Bearer " + store.getters.access_token,
      },
      ruleForm2: {
        username: "",
        password: "",
        newpassword1: "",
        newpassword2: "",
        checkCode: "",
        avatar: "",
        phone: "",
      },
      rules2: {
        password: [
          {
            required: true,
            min: 6,
            message: "原密码不能为空且不少于6位",
            trigger: "change",
          },
        ],
        newpassword1: [
          { validator: validateLevel, trigger: "change" },
          { required: true, min: 6, message: "不少于6位", trigger: "blur" },
        ],
        newpassword2: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.resetForm();
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      showCheckCode: (state) => state.common.showCheckCode,
      checkCodeTip: (state) => state.common.checkCodeTip,
    }),
  },
  methods: {
    openDialog() {
      this.resetForm();
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request({
            url: "/admin/user/edit",
            method: "put",
            data: this.ruleForm2,
          })
            .then((response) => {
              if (response.data.data) {
                this.$notify.success("修改成功");
                // 修改密码之后强制重新登录
                this.$store.dispatch("setShouldEdit", false);
                location.reload();
              } else {
                this.$notify.error(response.data.msg);
              }
            })
            .catch(() => {
              this.$notify.error("修改失败");
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.ruleForm2.password = undefined;
      this.ruleForm2.newpassword1 = undefined;
      this.ruleForm2.newpassword2 = undefined;
      this.ruleForm2.checkCode = undefined;
      this.ruleForm2.username = this.userInfo.username;
      this.ruleForm2.phone = this.userInfo.phone;
      this.ruleForm2.avatar = this.userInfo.avatar;
      //判断是否选择了租户ID
      const TENANT_ID = getStore({ name: "tenantId" });
      if (TENANT_ID) {
        this.headers["TENANT-ID"] = TENANT_ID; // 租户ID
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
